<template>
  <div class="home-index">
    <com-banner></com-banner>
    <div class="home-content-all">
      <div class="home-content-bg">
        <div class="home-content">
          <!-- 轮播下面的横标 -->
          <home-title></home-title>
          <!-- 主营业务 -->
          <main-business @onBuyClick="openBuyModel"></main-business>
        </div>
      </div>
      <!-- IT运维支持 -->
      <div class="it-bg">
        <div class="home-content">
          <it-maintenance @onBuyClick="openBuyModel"></it-maintenance>
        </div>
      </div>
      <!-- 公司记账报税 -->
      <div class="accounting">
        <div class="home-content">
          <accounting-box @onBuyClick="openBuyModel"></accounting-box>
        </div>
      </div>
      <!-- 服务合作流程 -->
      <div class="service-cooperation">
        <div class="home-content">
          <service-cooperation></service-cooperation>
        </div>
      </div>
      <!-- 我们的实力让您放心 我们的团队让您省心 -->
      <div class="about-info-content">
        <div class="home-content">
          <about-info></about-info>
        </div>
      </div>
      <!-- 办公环境及团队风貌 -->
      <div class="company-situation">
        <div class="home-content">
          <company-situation></company-situation>
        </div>
      </div>
      <!-- 新闻报道 -->
      <div class="news-report">
        <div class="home-content">
          <news-report></news-report>
        </div>
      </div>
      <!-- 客户反馈 -->
      <div class="customer-feedback">
        <div class="home-content">
          <customer-feedback></customer-feedback>
        </div>
      </div>
    </div>

    <com-modal v-model="buyModel" title="购买下单" :width="632">
      <buy-form @on-sublint="sublintClick" @on-clear="clearClick" />
    </com-modal>
  </div>
</template>

<script setup lang="ts">
import comModal from "@/components/com-modal/com-modal.vue";
import comBanner from "@/components/com-banner/com-banner.vue";
import homeTitle from "./components/home-title/home-title.vue";
import mainBusiness from "./components/main-business/main-business.vue";
import itMaintenance from "./components/it-maintenance/it-maintenance.vue";
import accountingBox from "./components/accounting-box/accounting-box.vue";
import serviceCooperation from "./components/service-cooperation/service-cooperation.vue";
import aboutInfo from "./components/about-info/about-info.vue";
import companySituation from "./components/company-situation/company-situation.vue";
import newsReport from "./components/news-report/news-report.vue";
import customerFeedback from "./components/customer-feedback/customer-feedback.vue";
import buyForm from "./components/buy-form/buy-form.vue";

import { ref } from "vue";

const buyModel = ref(false);

const openBuyModel = () => {
  buyModel.value = true;
};
const sublintClick = () => {
  buyModel.value = false;
};
const clearClick = () => {
  buyModel.value = false;
};
</script>

<style lang="less">
@import "@/style/var.less";
.home-content-all {
  position: relative;
}
@media (min-width: 750px) {
  .home-content-bg {
    height: 1235px;
    background-image: url("@/assets/image/home-main-business-bg.png");
    background-size: 100% 100%;
  }
  .it-bg {
    height: 1055px;
    background-image: url("@/assets/image/home-it-bg.png");
    background-size: 100% 100%;
  }
  .home-index {
    .home-content {
      width: @contentWhite;
      margin: auto;
      position: relative;
    }
  }

  .accounting {
    height: 878px;
    background-image: url("@/assets/image/home-accounting-bg.png");
    background-size: 100% 100%;
  }

  .service-cooperation {
    height: 1125px;
    background-image: url("@/assets/image/home-service-cooperation-bg.png");
    background-size: 100% 100%;
  }

  .about-info-content {
    height: 870px;
    // background-image: url("@/assets/image/home-service-cooperation-bg.png");
    // background-size: 100% 100%;
    background: #ed9675;
  }

  .company-situation {
    height: 1164px;
    background-image: url("@/assets/image/home-main-business-bg.png");
    background-size: 100% 100%;
  }
  .news-report {
    height: 829px;
    background-image: url("@/assets/image/home-it-bg.png");
    background-size: 100% 100%;
  }

  .customer-feedback {
    height: 928px;
    background-image: url("@/assets/image/home-main-business-bg.png");
    background-size: 100% 100%;
  }
}
@media (max-width: 750px) {
  .home-index {
    .home-content {
      width: 100%;
    }
  }

  .home-content-bg {
    background-image: url("@/assets/image/home-main-business-bg.png");
    background-size: 100% 100%;
  }
  .it-bg {
    background-image: url("@/assets/image/home-it-bg.png");
    background-size: 100% 100%;
    padding-bottom: 57px;
  }

  .accounting {
    background-image: url("@/assets/image/home-accounting-bg.png");
    background-size: 100% 100%;
    padding-bottom: 57px;
  }

  .service-cooperation {
    background-image: url("@/assets/image/home-service-cooperation-bg.png");
    background-size: 100% 100%;
  }
  .about-info-content {
    // background-image: url("@/assets/image/home-service-cooperation-bg.png");
    // background-size: 100% 100%;
    background: #ed9675;
  }
  .company-situation {
    background-image: url("@/assets/image/home-main-business-bg.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .news-report {
    background-image: url("@/assets/image/home-it-bg.png");
    background-size: 100% 100%;
  }

  .customer-feedback {
    background-image: url("@/assets/image/home-main-business-bg.png");
    background-size: 100% 100%;
  }
}
</style>
